<template>
	<view class="xmg-discount-row">
		<view class="xmg-discount-centont bg-white df-cen-rl">
			<view class="df-col-cen xmg-discount-left " @click="jumpPage">
				<view class="xmg-discount-title " >{{ title }}</view>
				<view class="xmg-discount-desc " >{{ desc }}</view>
			</view>
			<view style="flex: 1;overflow: hidden;">
				<scroll-view class="xmg-discount-scroll" :scroll-x="true" :scroll-with-animation="true">
					<view class="discount-scroll-item " v-for="(v, i) in goodsList" :key="i" @click="jumpGoods(v)" :class="[nums==i? 'iconAmniTwo':'']">
						<image :src="$Utils.img(v.sku_image)" mode="aspectFit" class="scroll-item-img" :lazy-load="true"></image>
						<view class="scroll-item-price">￥{{ v.topic_price }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'xmg-discount-row',
		data() {
			return {
				goodsList: [],
				nums: null,
				goodsListLen: 0
			};
		},
		props: {
			link: {
				type: Object,
				default: () => {
					return {};
				}
			},
			title: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			site_id:{
				type: [Number, String],
				default: 0
			}
		},
		mounted() {
			this.topicInit()
		},
		onUnload(){
			clearInterval(timernums)
		},
		methods: {
			topicInit() {
				if (this.link.topic_id && this.link.topic_id != undefined) {
					this.$Apis.getIndexTopicgoods({
						topic_id: this.link.topic_id,
						site_id:this.site_id,
						page: 1,
						page_size: 10
					}).then(res => {
						this.goodsList = res.list;
						this.goodsListLen = res.list.length
						this.inv()
					});
				}
			},
			inv() {
				let nums = null
				nums = Math.round(Math.random() * 3)
				this.nums = nums
				let timernums = setInterval(()=>{
					let nums = null
					nums = Math.round(Math.random() * 3)
					this.nums = nums
					// console.log("this.nums", this.nums)
				},8000)
			},
			jumpGoods(val) {
				// this.$Router.push({
				// 	path: '/shopPages/goods/detail',
				// 	query: {
				// 		goods_id: val.sku_id,
				// 		is_id: val.sku_id
				// 	}
				// 	// path: '/shopPages/goods/detaildiscount',
				// 	// query: {
				// 	// 	goods_id: val.topic_id,
				// 	// 	is_id: val.sku_id
				// 	// }
				// });
				this.$Router.push({
					path: '/publicPages/discountdetails/discountdetails',
					query: {
						id: val.id
					}
				});
			},
			jumpPage() {
				this.$Utils.jumpCustom(this.link);
			}
		}
	};
</script>

<style lang="scss">
	.xmg-discount-row {
		padding: 10rpx 20rpx;

		.xmg-discount-centont {
			padding: 20rpx 30rpx;
			width: 100%;
			border-radius: 20rpx;
			box-shadow: 6rpx 6rpx 8rpx rgba(114, 130, 138, 0.2);
		}

		.xmg-discount-left {
			width: 120rpx;
			margin-right: 20rpx;
		}

		.xmg-discount-title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}

		.xmg-discount-desc {
			background: #FBF3E9;
			border-radius: 8rpx;
			margin-top: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FD3B5C;
			padding: 8rpx 14rpx;
			white-space: nowrap;
		}

		.xmg-discount-scroll {
			white-space: nowrap;
			width: 100%;

			.discount-scroll-item {
				position: relative;
				display: inline-block;
				width: 120rpx;
				height: 100rpx;
				margin-right: 10rpx;

				.scroll-item-img {
					width: 100%;
					height: 100%;
				}

				.scroll-item-price {
					position: absolute;
					bottom: -6rpx;
					right: 0;
					/* #ifdef MP-WEIXIN */
					padding: 4rpx 10rpx;
					font-size: 18rpx;
					/* #endif */
					/* #ifdef H5 */
					padding: 2rpx 6rpx;
					font-size: 16rpx;
					/* #endif */

					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					background-color: #ff364e;
					border-radius: 8rpx;
				}
			}

			.discount-scroll-item:nth-last-child(1) {
				margin-right: 0;
			}
		}
	}

	.iconAmniTwo {
		animation-name: myfirstTwo;
		/*关键帧名称*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		animation-iteration-count: infinite;
		/*动画播放的次数*/
		animation-duration: 2s;
		/*动画所花费的时间*/
	}

	@keyframes myfirstTwo {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.05);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.05);
		}
	}
	

</style>
